<script setup lang="ts">
import { ref, defineExpose } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { usePublicHooks } from "@/views/hooks";
import StaffCard from '@/components/StaffCard/index.vue'
import LicensePlate from '@/components/LicensePlate/license-plate.vue'
import UploadImg from '@/components/UploadImg/index.vue'
import VehicleRequestInfo from './components/VehicleRequestInfo.vue'
import { FormProps } from "./utils/types";
import OfficeBuilding from "~icons/ep/office-building";
import { getToken, formatToken } from "@/utils/auth";
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({
		// 基础信息
		requestCode: '',
		vehicleId: '',
		vehicleName: '',
		licensePlate: '',
		driverId: '',
		driverName: '',
		startTime: '',
		endTime: '',
		totalMileage: 0,
		totalCost: 0,
		remark: '',
		dispatchType: 0,
		vehicleRequest: {} as any,
		startPhotoDashboard: '',
		endPhotoDashboard: '',
		endExceptionType: 1,
		// 新增字段
		deviceId: '',
		startLocation: '',
		endLocation: '',
		startFuelLevel: 0,
		endFuelLevel: 0,
		startMileage: 0,
		endMileage: 0,
		fuelCost: 0,
		parkingFee: 0,
		tollFee: 0,
		otherFees: 0,
		startVehicleCondition: '',
		endVehicleCondition: '',
		routeDescription: '',
		status: 0
	})
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const { switchStyle } = usePublicHooks();
function getRef() {
	return ruleFormRef.value;
}

function handleChangeStart(file, fList) {
	console.log("仪表盘照片：", file);
	console.log("fList", fList);
	newFormInline.value.startPhotoDashboard = file.data.url;
}
const fileList = ref([]);
function handleChangeEnd(file, fList) {
	console.log("仪表盘照片：", file);
	console.log("fList", fList);
	newFormInline.value.endPhotoDashboard = file.data.url;
}
defineExpose({ getRef });
</script>

<template>
	<div>
		<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="110px" label-position="left">
			<el-row :gutter="30">
				<re-col>
					<div class="flex items-center justify-around bg-[#f8f8f8] p-4 rounded">
						<div class="flex items-center">
							<div>驾驶员：</div>
							<div class="w-[240px]">
								<StaffCard :avatar="newFormInline?.avatar" :name="newFormInline?.driverName"
									:phone="newFormInline?.mobile" status-badge="空闲" status-color="#0f9d58" />
							</div>
						</div>
						<div class="flex items-center">
							<div>车辆：</div>
							<LicensePlate :plateNumber="newFormInline?.licensePlate" size="small" newEnergy />
						</div>
					</div>
				</re-col>
				<el-divider content-position="left">用车申请信息</el-divider>
				<!-- <div class="header">
              <IconifyIconOffline class="mr-2" :icon="OfficeBuilding" />
              <span class="font-medium"></span>
            </div> -->
				<re-col :value="24">
					<VehicleRequestInfo v-if="newFormInline.vehicleRequest" :vehicle-request="newFormInline.vehicleRequest" />
				</re-col>
				<re-col :value="24">
					<el-row v-if="newFormInline.dispatchType == 1" :gutter="30">
						<el-divider content-position="left">出车信息</el-divider>
						<!-- 新增地点和里程 -->
						<re-col :value="12">
							<el-form-item label="出车时间" prop="startTime">
								<el-date-picker v-model="newFormInline.startTime" type="datetime" placeholder="请选择归还时间"
									format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
							</el-form-item>
						</re-col>
						<re-col :value="12">
							<el-form-item label="出车地点" prop="startLocation">
								<el-input v-model="newFormInline.startLocation" placeholder="请输入出车地点" style="width:100%" />
							</el-form-item></re-col>
						<re-col :value="12">
							<el-form-item label="出车公里数" prop="startMileage">
								<el-input-number v-model="newFormInline.startMileage" :precision="2" style="width:100%" />
							</el-form-item></re-col>
						<re-col :value="24">
							<div class="mb-[20px]">
								<div class="flex items-center mb-[10px]">
									<div>仪表盘照片</div>
									<div class="text-[12px] ml-[10px]">(只能上传jpg/png文件，且不超过500kb)</div>
								</div>
								<!-- <UploadImg :file-list="newFormInline.startPhotoDashboard" @change="handleChangeStart" /> -->
								<el-upload v-model:file-list="fileList" class="upload-demo" accept="image/jpeg,image/png,image/gif"
									action="api/files/upload" :limit="1" :headers="{
										'Authorization': formatToken(
											getToken().accessToken
										)
									}" :on-success="handleChangeStart">
									<el-button size="small" type="primary">点击上传</el-button>
								</el-upload>
							</div>
						</re-col>
					</el-row>
					<el-row :gutter="30" v-else>
						<el-divider content-position="left">还车信息</el-divider>
						<re-col :value="12">
							<el-form-item label="还车时间" prop="endTime">
								<el-date-picker v-model="newFormInline.endTime" type="datetime" placeholder="请选择归还时间"
									format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
							</el-form-item>
						</re-col>
						<re-col :value="12">
							<el-form-item label="还车地点" prop="endLocation">
								<el-input v-model="newFormInline.endLocation" placeholder="请输入还车地点" style="width:100%" />
							</el-form-item>
						</re-col>
						<re-col :value="12">
							<el-form-item label="还车公里数">
								<el-input-number v-model="newFormInline.totalMileage" :precision="2" style="width:100%" />
							</el-form-item>
						</re-col>
						<!-- 新增费用字段 -->
						<!-- <re-col :value="12" v-if="false">
              <el-form-item label="燃油费(元)" prop="fuelCost">
                <el-input-number v-model="newFormInline.fuelCost" :precision="2" style="width:100%" />
              </el-form-item>
            </re-col>
            <re-col :value="12" v-if="false">
              <el-form-item label="ETC费(元)" prop="tollFee">
                <el-input-number v-model="newFormInline.tollFee" :precision="2" style="width:100%" />
              </el-form-item>
            </re-col>
            <re-col :value="12" v-if="false">
              <el-form-item label="停车费(元)" prop="parkingFee">
                <el-input-number v-model="newFormInline.parkingFee" :precision="2" style="width:100%" />
              </el-form-item>
            </re-col> -->
						<re-col :value="12">
							<el-form-item label="费用(元)" prop="otherFees">
								<el-input-number v-model="newFormInline.otherFees" :precision="2" style="width:100%" />
							</el-form-item>
						</re-col>
						<re-col :value="12">
							<el-form-item label="车辆是否异常" prop="endExceptionType">
								<el-switch v-model="newFormInline.endExceptionType" inline-prompt :active-value="1" :inactive-value="2"
									active-text="正常" inactive-text="异常" :style="switchStyle" />
							</el-form-item>
						</re-col>
						<re-col v-if="newFormInline.endExceptionType !== 1">
							<el-form-item label="异常说明" prop="endVehicleCondition">
								<el-input v-model="newFormInline.endVehicleCondition" type="textarea" />
							</el-form-item>
						</re-col>
						<re-col :value="24">
							<div class="mb-[20px]">
								<div class="flex items-center mb-[10px]">
									<div>仪表盘照片</div>
									<div class="text-[12px] ml-[10px]">(只能上传jpg/png文件，且不超过500kb)</div>
								</div>
								<el-upload v-model:file-list="fileList" class="upload-demo" accept="image/jpeg,image/png,image/gif"
									action="api/files/upload" :limit="1" :headers="{
										'Authorization': formatToken(
											getToken().accessToken
										)
									}" :on-success="handleChangeEnd">
									<el-button size="small" type="primary">点击上传</el-button>
								</el-upload>
							</div>
						</re-col>
					</el-row>
				</re-col>
				<!-- 新增油量相关字段 -->
				<!-- <re-col :value="12">
          <el-form-item label="出车油量(%)" prop="startFuelLevel">
            <el-input-number v-model="newFormInline.startFuelLevel" :precision="0" :min="0" :max="100" />
          </el-form-item>
        </re-col>
        <re-col :value="12">
          <el-form-item label="还车油量(%)" prop="endFuelLevel">
            <el-input-number v-model="newFormInline.endFuelLevel" :precision="0" :min="0" :max="100" />
          </el-form-item>
        </re-col> -->
				<!-- <el-divider content-position="left">费用</el-divider>
        <re-col :value="12">
          <el-form-item label="总费用">
            <el-input-number v-model="newFormInline.totalCost" :precision="2" />
          </el-form-item>
        </re-col> -->

				<!-- 车辆状态描述 -->
				<re-col>
					<el-form-item label="备注">
						<el-input v-model="newFormInline.remark" placeholder="请输入备注" type="textarea" />
					</el-form-item>
				</re-col>
			</el-row>
		</el-form>
	</div>
</template>
<style lang="scss" scoped>
.header {
	@apply flex items-center mb-4 pb-2 border-b border-gray-200;
}
</style>
